<template>
  <a-card :bordered="false">
    <a-spin :spinning="confirmLoading">
      <j-form-container :disabled="disabled">
        <a-form-model layout="horizontal" ref="subForm" slot="detail" :model="model" :rules="validatorRules" v-bind="formItemLayout">
          <z-form-item :datas="fieldArr" :form="model" :rules="validatorRules" :gutter="0">
            <!--//自定义签到时间-->
            <template slot="slots-time">
              <a-time-picker v-model="model.startTime" format="HH:mm" valueFormat="HH:mm" suffixIcon="" @change="onChange($event, 'startTime')" />
              ~
              <a-time-picker v-model="model.endTime" :disabledHours="getDisabledHours" :disabledMinutes="getDisabledMinutes" format="HH:mm" valueFormat="HH:mm" @change="onChange($event, 'endTime')" ref="endTime" />
            </template>
          </z-form-item>
          <a-form-model-item :wrapper-col="{ offset: formItemLayout.labelCol.span }">
            <a-space :size="20" style="margin-top:30px;">
              <!-- <a-button @click="onResetForm">重置</a-button> -->
              <a-button type="primary" @click="submitForm">保存</a-button>
            </a-space>
          </a-form-model-item>
        </a-form-model>
      </j-form-container>
    </a-spin>
  </a-card>
</template>

<script>
import { signInConfig, getSignInConfig } from '@/api/sjsk/clinicmanageService'
var validateTimeList = (rule, value, callback) => {
  let values = value.filter(i => i)
  if (values && values.length === 2) {
    callback()
  } else {
    callback('请选择签到时间')
  }
}
  export default {
    data () {
      return {
        model: {},
        confirmLoading: false,
        disabled: false,
        formItemLayout: {
          labelCol: { span: 2 },
          wrapperCol: { span: 8 }
        },
        fieldArr: [
          {label: '签到人员', prop: 'person', tagType: 'dict-select', dictOptions: [{ text:"全部专职人员", value:"1" }], disabled: true},
          {label: '签到时间', prop: 'time'},
          {label: '签到规则', prop: 'rules', tagType: 'textarea'},
          {label: '签到提醒', prop: 'remind', tagType: 'time-picker', format:'HH:mm'},
        ],
        validatorRules: {
          time:[
            { required: true, type: 'array', message: '请选择签到时间' },
            { validator: validateTimeList },
          ],
          remind:[ { required: true, message: '请选择签到提醒' }],
        }
      }
    },
    created() {
      this.$set(this.model, 'person', '1')
      this.$set(this.model, 'type', '2')
      this.$set(this.model, 'startTime', '00:00')
      this.$set(this.model, 'endTime', '23:59')
      this.$set(this.model, 'time', [this.model.startTime, this.model.endTime])
      this.$set(this.model, 'remind', '09:00')
      this.initForm()
    },
    methods: {
      submitForm () {
        // let time = this.$options.filters.moment('','')
        const parameter = Object.assign({}, this.model)
        console.log(parameter)
        this.$refs.subForm.validate((valid)=> {
          if (valid) {
            signInConfig(parameter)
              .then(res => {
                this.confirmLoading = false
                if (res.success) {
                  this.$message.success(res.message)
                } else {
                  this.$message.warn(res.message)
                }
              })
              .catch(e => {
                this.$message.warn('请求失败！')
                this.confirmLoading = false
              })
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      // 签到规则详情
      initForm() {
        getSignInConfig({ type: '2' })
          .then(res => {
            if (res.success) {
              let result = res.result
              if (result && Object.keys(result).length > 0) {
                this.model = result
                if(this.model.startTime && this.model.endTime) {
                  this.$set(this.model, 'time', [this.model.startTime, this.model.endTime])
                }
              }
            } else {
              this.$message.warn(res.message)
            }
          })
          .catch(e => {
            this.$message.warn('请求失败！')
          })
      },
      onResetForm() {
        this.$refs.subForm.submitForm();
      },
      onChange(e, field) {
        if (!this.model.hasOwnProperty('time')) {
          this.$set(this.model, 'time', [])
        }
        if(field==='startTime') {
          this.$set(this.model.time, 0, e?e:'')
        }
        if(field==='endTime') {
          this.$set(this.model.time, 1, e?e:'')
        }
        this.$refs['subForm'].validateField('time')
      },
      getDisabledHours() {
        // let hours = [];
        // let [startHours, startSeconds] = this.moment(this.startTime)
        //   .format("HH:mm")
        //   .split(":");
        // for (let i = 0; i < parseInt(startHours); i++) {
        //   hours.push(i);
        // }
        // return hours;
      },
      getDisabledMinutes(selectedHour) {
      // let [startHours, startSeconds] = this.moment(this.startTime)
      //   .format("HH:mm")
      //   .split(":");
      // let minutes = [];
      // if (selectedHour == startHours) {
      //   for (let i = 0; i < parseInt(startSeconds); i++) {
      //     minutes.push(i);
      //   }
      //   return minutes;
      // }
      }
    }
  }
</script>
